<template>
  <div class="common-table">
    <el-table
      ref="elTable"
      v-loading="loading"
      :data="tableData"
      row-key="id"
      :border="border"
      :stripe="stripe"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <!-- 全选列（支持自定义宽度） -->
      <el-table-column
        type="selection"
        :width="selectionWidth"
        v-if="showSelection"
        class="custom-selection-column"
      ></el-table-column>

      <!-- 遍历列配置生成表格列 -->
      <template v-for="column in columns">
        <!-- 序号列（优化key唯一性） -->
        <el-table-column
          v-if="column.type === 'index'"
          :key="`index-${column.label || column.prop || Date.now()}`"
          :label="column.label"
          type="index"
          :width="column.width || 60"
          :align="column.align || 'center'"
          :fixed="column.fixed"
          :index="column.indexMethod" 
        ></el-table-column>
        
        <!-- 带插槽的列（修复scope传递） -->
        <el-table-column
          v-else-if="column.slotName"
          :key="column.prop || column.label"
          :label="column.label"
          :prop="column.prop"
          :width="column.width"
          :align="column.align || 'center'"
          :sortable="column.sortable"
          :fixed="column.fixed"
        >
          <template slot-scope="scope">
            <slot :name="column.slotName" :scope="scope"></slot>
          </template>
        </el-table-column>
        
        <!-- 普通列（增强空值处理） -->
        <el-table-column
          v-else
          :key="column.prop"
          :label="column.label"
          :prop="column.prop"
          :width="column.width"
          :align="column.align || 'center'"
          :sortable="column.sortable"
          :fixed="column.fixed"
        >
          <template slot-scope="scope">
              <div 
                class="text-limit" 
                :title="getCellTitle(scope, column)"
              >
                {{ displayContent(scope, column) || '-' }}
              </div>
          </template>
        </el-table-column>
      </template>
    </el-table>

    <!-- 分页组件（默认显示，可通过props控制） -->
    <div class="pagination" v-if="showPagination">
      <el-pagination
        background
        :current-page="currentPage"
        :page-size="pageSize"
        :page-sizes="pageSizes"
        :total="total"
        :layout="paginationLayout"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      ></el-pagination>
    </div>
  </div>
</template>
  
<script>
export default {
  name: "CommonTable",
  props: {
    tableData: { 
      type: Array, 
      default: () => [] 
    },
    columns: { 
      type: Array, 
      required: true,
      description: "表格列配置" 
    },
    border: { 
      type: Boolean, 
      default: false 
    },
    stripe: { 
      type: Boolean, 
      default: false 
    },
    height: { 
      type: [String, Number], 
      default: "700px" 
    },
    loading: { 
      type: Boolean, 
      default: false 
    },
    showSelection: { 
      type: Boolean, 
      default: true 
    },
    selectionWidth: {  // 多选列宽度
      type: Number, 
      default: 55 
    },
    // 分页相关配置
    showPagination: { 
      type: Boolean, 
      default: false 
    },
    currentPage: { 
      type: Number, 
      default: 1 
    },
    pageSize: { 
      type: Number, 
      default: 10 
    },
    pageSizes: { 
      type: Array, 
      default: () => [10, 20, 50, 100] 
    },
    total: { 
      type: Number, 
      default: 0 
    },
    paginationLayout: {  // 分页布局
      type: String, 
      default: "total, sizes, prev, pager, next, jumper" 
    }
  },
 
  methods: {
    // 选择变更事件
    handleSelectionChange(selection) {
      this.$emit("selection-change", selection);
    },
    // 分页尺寸变更
    handleSizeChange(size) {
      this.$emit("size-change", size);
    },
    // 分页页码变更
    handleCurrentChange(page) {
      this.$emit("current-change", page);
    },
    // 显示内容处理（支持格式化函数）
    displayContent(scope, column) {
      const content = scope.row[column.prop];
      // 处理空值（null/undefined/空字符串）
      if (content === null || content === undefined || content === '') {
        return null;
      }
      return column.formatter ? column.formatter(scope.row, column, content, scope.$index) : content;
    },
    // 获取单元格title（用于hover提示）
    getCellTitle(scope, column) {
      const content = this.displayContent(scope, column);
      return content || '';
    },
    // 获取表格实例
    getTableRef() {
      return this.$refs.elTable;
    },
    // 清空选中项
    clearSelection() {
      this.$refs.elTable?.clearSelection();
    },
    // 获取当前选中项
    getSelection() {
      return this.$refs.elTable?.getSelection() || [];
    },
    // 切换行选中状态
    toggleRowSelection(row, selected) {
      this.$refs.elTable?.toggleRowSelection(row, selected);
    }
  }
};
</script>
  
<style scoped>
::v-deep .el-table__empty-block{
  display: none !important;
}
.custom-selection-column .el-checkbox {
  display: inline-block !important;
  margin-right: 5px;
}
.custom-selection-column .cell {
  display: flex;
  align-items: center;
  justify-content: center;
}

::v-deep .pagination {
  display: flex;
  flex-direction: row-reverse;
  margin: 15px 0;
}

::v-deep .el-table__cell {
  text-align: center !important;
  padding: 12px 0;  /* 增加单元格内边距，优化排版 */
}

::v-deep th.el-table__cell {
  background: #F6F9FF;
  color: #161616;
  font-weight: 500;  /* 表头文字加粗 */
}

.text-limit {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;  /* 最多显示2行 */
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
  line-height: 1.5;
  max-height: 3em;  /* 2行高度（line-height*2） */
}

::v-deep .el-tooltip__popper {
  max-width: 500px;
  padding: 8px 12px;
}

::v-deep .tooltip-content {
  white-space: pre-wrap;
  word-wrap: break-word;
}
</style>